<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>兑换记录</title>
	<link href="css/mui.min.css" rel="stylesheet" />
	<link href="iconfont/iconfont-yc.css" rel="stylesheet" />
	<link href="css/posapp-yc.css" rel="stylesheet" />
	<link href="css/waitMe.min.css" rel="stylesheet" />
</head>
<style>
	.mui-icon-bars:before {
		content: '\e466';
		color: #fff;
	}

	.mui-table-view {
		background: #fff;
		margin-bottom: 10px;
	}

	.mui-table-view .mui-table-view-cell span {
		float: right;
		color: #999;
		padding-right: 5px;
	}

	.mui-table-view-cell:after {
		display: none;
	}

	.mui-table-view:before {
		display: none;
	}

	.mui-table-view-chevron .mui-table-view-cell {
		padding-right: 10px;
	}

	.payment-prompt .mui-bar span {
		font-family: Muiicons;
	}

	* { touch-action: none; }
</style>

<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left">
			<span class="mui-icon mui-icon-left-nav"></span>返回
		</button>
		<h1 class="mui-title">兑换记录</h1>
		<!-- <a class="mui-icon mui-icon-bars mui-pull-right"></a> -->
	</header>
	<!--下拉刷新容器-->
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll">
			<!--数据列表-->
			<ul class="mui-table-view mui-table-view-chevron">
				<div class="mui-content">
					<div id="record-list" class="state-list">
						<ul v-for="item in items" class="mui-table-view">
							<li class="mui-table-view-cell">奖品名称<span v-html="item.name"></span></li>	
							<li class="mui-table-view-cell">奖品数量<span v-html="item.num"></span></li>
							<li class="mui-table-view-cell">兑换人<span v-html="item.realName"></span></li>
							<li class="mui-table-view-cell">联系电话<span v-html="item.phone"></span></li>
							<li class="mui-table-view-cell">兑换时间<span v-html="item.exchangeDateF"></span></li>
							<li class="mui-table-view-cell">有效期<span v-html="item.startDateF + '至' + item.endDateF"></span></li>	
							<li class="mui-table-view-cell">说明<span v-html="item.remark">{{item.remark}}</span></li>	
						</ul>
					</div>
				</div>
			</ul>
		</div>
	</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/waitMe.min.js"></script>
<script src="js/vue.js"></script>
<script src="js/common.js"></script>
<script src="js/menuFlat/menuFlat.min.js"></script>
<script src="js/setting.js"></script>
<script>
	var h = mui(document).common();

	mui.init({
		pullRefresh: {
			container: '#pullrefresh',
			down: {
				contentrefresh: '正在刷新...',
				callback: pulldownRefresh
			},
			up: {
				contentrefresh: '正在加载...',
				callback: pullupRefresh
			}
		}
	});

	var vm = new Vue({
		el:"#record-list",
		data: {
			items:[],
			pageIndex : 1,
			pageSize : 10
		},
		methods: {
			refresh: function(){
				var self = this;

				h.startMask();

				mui.ajax(setting.serverUrl + "/interfaces/prize/recordList", {
					dataType: 'json', //服务器返回json格式数据 
					type: 'post', //HTTP请求类型 
					data:{
						token: sessionStorage.getItem("token"),
						pageIndex : 1,
						pageSize : self.pageSize
					},
					success: function(response) {
						h.endMask();

						if(response.result){
							var data = response.data;

							vm.items = data.rows;

							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
							mui('#pullrefresh').pullRefresh().refresh(true);
						}else{
							mui.toast(data.message);
						}
					}
				});
			},
			loadMore: function(){
				var self = this;

				mui.ajax(setting.serverUrl + "/interfaces/prize/recordList", {
					dataType: 'json', //服务器返回json格式数据 
					type: 'post', //HTTP请求类型 
					data:{
						token: sessionStorage.getItem("token"),
						pageIndex : self.pageIndex + 1,
						pageSize : self.pageSize
					},
					success: function(response) {
						if(response.result){
							var data = response.data;

							data.rows.forEach(function(item){
								self.items.push(item);
							});

							if(self.pageIndex < data.totalPage){
								self.pageIndex++;
								mui('#pullrefresh').pullRefresh().endPullupToRefresh();//表示还有数据
							}
							else{
								mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);//表示没有数据
							}
						}else{
							mui.toast(data.message);
						}
					}
				});
			}
		},
		mounted: function(){
			this.refresh();
		}
	});

	/**
	 * 下拉刷新具体业务实现
	 */
	function pulldownRefresh() {
		vm.refresh();
	}

	/**
	 * 上拉加载具体业务实现
	 */
	function pullupRefresh() {
		vm.loadMore();
	}

	//返回	
	mui(".mui-bar-nav").on('tap', '.mui-pull-left', function (e) {
		var htype = {
			url: 'home.html'
		}
		
		h.forward_wechat(htype);
	});
</script>
</html>